<style>
  html,body{ margin: 0; padding: 0; }
  .head{
    display: flex;
    align-items: center;
    height: 42px;
    background-color: #999;
    padding: 0 20px;
  }
  .box_none{
    width: 300px;
  }
  .head_box{
    position: relative;
    width: 32px;
    height: 42px;
  }
  .image_box{
    position: absolute;
    top: 5px;
    left: 50%;
    width: 32px;
    height: 32px;
    background-color: #333;
    border-radius: 50%;
    vertical-align: middle;
    z-index: 1;
    transform: translate(-50%, 0);
    transition: transform .3s, width .3s, height .3s;
  }
  .head_box:hover .image_box{
    width: 52px;
    height: 52px;
    transform: translate(-50%, 28%);
  }
  .message_box{
    position: absolute;
    top: 42px;
    left: 50%;
    width: 332px;
    height: 460px;
    background-color: #666;
    transform: translate(-50%, 0);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s, visibility .3s;
  }
  .head_box:hover .message_box{
    opacity: 1;
    visibility: visible;
  }
</style>
<div class="head">
  <div class="box_none"></div>
  <div class="head_box">
    <div class="image_box"></div>
    <div class="message_box"></div>
  </div>
</div>
<script>
  
</script>